<template>
 <el-table
    ref="multipleTable"
    :data="tableData"
    style="width: 100%"
    @selection-change="handleSelectionChange" class="eltable">

    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
     prop="MS"
      label="名称"
      width="120">
    </el-table-column>
    <el-table-column
      prop="JSGS"
      label="角色归属"
      width="80"
      show-overflow-tooltip
      >
    </el-table-column>
    <el-table-column
      prop="SFNZ"
      width="80"
      label="是否内置"
      >
    </el-table-column>
    <el-table-column
      prop="MSHU"
      width="180"
      label="描述"
      >
    </el-table-column>

    <el-table-column
      prop="address"
      width="120"
      label="创建时间"
      >
    </el-table-column>

    <el-table-column
      prop="ZTGL"
      label="账户状态"
      >
    </el-table-column>
     <el-table-column label="操作">
      <template slot-scope="scope" class="sps">
        <div class="sps">
          <span  @click="handleEdit( scope.row)" class="sp1">编辑</span>      
          <span  @click="handleEdit(scope.$index, scope.row)" class="sp2">删除</span>
        </div>
          
      </template>
    </el-table-column>
    
  </el-table>

</template>

<script>
export default {
    data() {
      return {
        
        tableData: [{
          id:123,
          SFNZ: '否',
          MS: '供应商VIP管理',
          JSGS: '平台',
          pitype:'美元',
          MSHU:"采购审核，采购登记管理",
          address:'2016-05-07',
          ZTGL:'正常'

        }, {
          id:1234,
          SFNZ: '否',
          MS: '供应商VIP管理',
          JSGS: '平台',
          pitype:'人民币',
          MSHU:"采购审核，采购登记管理",
          address:'2016-05-07',
          ZTGL:'正常'  
        }, {
          id:12345,
          SFNZ: '否',
          MS: '供应商VIP管理',
          JSGS: '平台',
          pitype:'欧元',
          MSHU:"采购审核，采购登记管理",
          address:'2016-05-07',
           ZTGL:'正常'
        }, {
          id:12356,
          SFNZ: '否',
          MS: '供应商VIP管理',
          JSGS: '平台',
          pitype:'英镑',
          MSHU:"采购审核，采购登记管理",
          address:'2016-05-07',
           ZTGL:'正常'
        }],
        multipleSelection: []
      }
    },

    methods: {
         handleEdit(index, row) {
        console.log(index, row);
      },
      handleDelete(index, row) {
        console.log(index, row);
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      }
    }
  }
</script>

<style>
.el-table{
  margin-top: 10px;
}
.eltable{
  font-size: 10px !important;
}
.cell{
  text-align: center !important;
}
span{
  display: block;
  float: left;
  /* margin-left: 10px; */
}
.sps{
  display: flex;
  margin-left: 45px;
}
.sp1{
  margin-right: 6px;
  color: #31a4ff;
}
.sp2{
  color: #ff6874;
}
.el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner{
    border:#ff6874 ;
     background-color:#ff6874;
 }

</style>